<template>
  <wd-card class="package-card" :title="data.name">
    <p class="package-description">{{ data.description }}</p>
    <p class="package-count">咨询次数：{{ data.times }} 次</p>
    <p class="package-price">¥{{ data.price }}</p>
    <template #footer>
      <wd-button size="large" type="primary" block @click="purchasePackage">购买</wd-button>
    </template>
  </wd-card>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue'

const props = defineProps({
  data: {
    type: Object,
    required: true,
  },
})

const purchasePackage = () => {
  // 在这里实现购买逻辑
  console.log('开始购买流程', props.data.title)
}
</script>

<style lang="scss" scoped>
.package-card {
  margin-bottom: 20px;
}

.package-description {
  margin: 10px 0;
}

.package-count {
  margin: 10px 0;
  font-size: 16px;
  color: #555;
}

.package-price {
  font-size: 20px;
  font-weight: bold;
  color: #ff4757;
}
</style>
